<template>
    <div class="box">
        <div class="two-box">
            <span style="background-color: #67c23a"></span>空闲
        </div>
        <div class="two-box" style="margin-left: 100px">
            <span style="background-color: #e6a23c"></span>已使用
        </div> 
    </div>
    <el-row :gutter="30">
        <el-col :span="5" v-for="classroom in classroomStore.allClrs" :key="classroom.clsr_id">
            <el-card  :class="{color: classroom.clsr_occupy === 1}">
                <div>
                    <span>{{classroom.clsr_name}}</span>
                </div>
                <div class="btn-wrapper">
                    <el-button @click="beginUpdate(classroom)" v-show="classroom.clsr_occupy !== 1">编辑</el-button>
                    <el-button @click="remove(classroom)">删除</el-button>
                </div>
            </el-card>
        </el-col>
        <el-col :span="5">
            <el-card @click="beginAdd">
                <div>+</div>
            </el-card>
        </el-col>
    </el-row>
    <!-- 新增弹窗 -->
    <el-dialog v-model="classroomEdit.isEdit" title="教室编辑">
        <el-form :model="classroomEdit.model" :rules="classroomEdit.rules" :ref="(el:any) => classroomEdit.formRef = el">
            <el-form-item label="班级名称:" prop="clsr_name">
                <el-input v-model.trim="classroomEdit.model.clsr_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="save">确定</el-button>
                <el-button @click="classroomEdit.isEdit = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import {useClassRoomStore} from '@/store';
import {markRaw, onMounted,reactive,nextTick} from 'vue';
import { ElMessage, ElMessageBox, FormRules, FormInstance} from 'element-plus';

const classroomStore = useClassRoomStore();

const classroomEdit = reactive<{isEdit: boolean; model: HttpPayload.GetClassRoom; formRef: null | FormInstance; rules: FormRules}>({
    isEdit: false,
    model:{clsr_id: 0,clsr_name: "",clsr_occupy: 0},
    formRef: null,
    rules: markRaw({
        clsr_name:[
            {
                validator: (type, value, callback) => {
                            if(value === '')   //非空验证
                                callback(new Error("* 教室名不能为空"));
                            else if(value.length < 2 || value.length > 20)  //长度验证
                                callback(new Error("* 教室名长度2 - 20"));
                            else if(classroomStore.allClrs.some(classroom => classroom.clsr_name === value && classroom.clsr_id !== classroomEdit.model.clsr_id))  //唯一性验证
                                callback(new Error("* 教室已存在"));
                            else
                                callback();
                        },
                        trigger:"blur" 
            }
        ]
    })
})

onMounted (() => {
    try{
        classroomStore.init();
    } catch(e){/**/}
})

const beginAdd = () => {
    classroomEdit.formRef?.resetFields();
    classroomEdit.model = {clsr_id: 0, clsr_name: "",clsr_occupy: 0};
    nextTick(() => classroomEdit.isEdit = true);
}

const beginUpdate = (classroom: Vm.ClassRoom) => {
    classroomEdit.formRef?.resetFields();
    classroomEdit.model = {...classroom};
    nextTick(() => classroomEdit.isEdit = true);
}

const remove = async (classroom:Vm.ClassRoom) => {
    try{
        await ElMessageBox.confirm(`确定要删除教室: ${classroom.clsr_name} 吗? `, '提示', {type:"warning"});
        await classroomStore.remove(classroom.clsr_id);
         ElMessage({type:"success", message:`教室: ${classroom.clsr_name} 删除成功..`})
    } catch(e) {/**/}
};

const save = async () => {
    try {
        await classroomEdit.formRef?.validate();
        await classroomStore[classroomEdit.model.clsr_id === 0 ? "add" : "update"](classroomEdit.model);
        ElMessage({type:"success", message:"教室编辑成功"});
        classroomEdit.isEdit = false;
    } catch(e){/**/}
};

</script>

<style scoped lang="stylus">
.el-card
    position: relative
.btn-wrapper
    position: absolute
    top:0
    left: 0
    width: 100%
    height: 100%
    background-color: rgba(0,0,0,0.5)
    display: none
.el-card:hover .btn-wrapper
    height 67px
    display: flex
    justify-content: center
    align-items: center
.box
    display: flex
    align-items: center
    margin: 20px 0 20px 20px
.two-box
    display: flex
    justify-content: center
    align-items: center
.box .two-box span
    display: block
    width: 20px
    height: 20px
    border-radius: 50%
    margin-right: 10px
.el-card
    background-color: #67c23a
    margin-bottom: 20px
    text-align: center
    border-radius: 15px
.color
    background-color: #e6a23c
</style>
